﻿<template>
    <div class="appBack">
        <h1>{{msg}}</h1>
        <!--通过父组件给子组件传递函数类型的props实现:子给父传递数据-->
        <School :getSchoolName="getSchoolName"/>
        <hr />
        <!--通过父组件给子组件绑定一个组定义事件实现:子给父传递数据(第一种写法，使用的是@或者是v-on)-->
        <Student v-on:bilibili="demo"/>
        <!--通过父组件给子组件绑定一个组定义事件实现:子给父传递数据(第二种写法，使用的是ref)-->
        <!-- <Student ref="student"/> -->
    </div>
</template>

<script>
    import School from './components/School.vue'
    import Student from './components/Student.vue'
    export default{
        name: 'App',
        components:{School,Student},
        data() {
            return {
                msg: '你好啊!'
            }
        },
        methods: {
            getSchoolName(name){
                console.log('App收到了学校名:',name)
            },
            demo(name,...a){
                console.log('demo被调用了',name,a)
            }
        },
        mounted() {
            // this.$refs.student.$on('bilibili',this.demo)//绑定自定义事件
            // this.$refs.student.$once('bilibili',this.demo)//绑定自定义事件(一次性)
        },
    }
</script>

<style>
    .appBack{
        background-color: gray;
    }
</style>